<template>
  <div>
    <div class="ele-page-header">
      <div class="ele-page-title">编辑企业</div>
    </div>
    <el-form ref="demoForm" :model="form" :rules="rules" label-width="150px">
      <div class="ele-body">
        <el-card shadow="never">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入用户手机号（做为登录账号）" clearable style="width: 80%;" />
          </el-form-item>
          <el-form-item label="密码" prop="passwordText" v-if="!isUpdate">
            <el-input v-model="form.passwordText" placeholder="请输入密码" clearable style="width: 80%;" />
          </el-form-item>

          <el-form-item label="分类：" prop="classifyId">
            <!-- 下拉 classifyList -->
            <el-select v-model="form.classifyId" placeholder="请选择资讯分类" clearable style="width: 80%;">
              <el-option v-for="item in classifyList" :key="item.id" :label="item.catname" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="企业名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入企业名称" clearable style="width: 80%;" />
          </el-form-item>
          <el-form-item label="企业名称（英文）" prop="companyNameEn">
            <el-input v-model="form.companyNameEn" placeholder="请输入企业名称（英文）" clearable style="width: 80%;" />
          </el-form-item>

          <el-form-item label="企业简介：" prop="companyShl">
            <el-input type="textarea" v-model="form.companyShl"  placeholder="请输入资讯简介"  clearable
            :maxlength="1000"
            :autosize="{ minRows: 5, maxRows: 5 }"
              style="width: 80%;" />
          </el-form-item>
          <el-form-item label="企业列表图：" prop="avatar">
            <upload-img class="logo" :type="uploadRules" v-model="form.avatar" :info="logoText">
            </upload-img>
          </el-form-item>

          <el-form-item label="宣传方式：" prop="companyDisplayWay">
            <!-- 点击选中事件 -->
            <el-radio-group v-model="form.companyDisplayWay" :disabled="false" @change="changeFlag">
              <el-radio :label="1">视频</el-radio>
              <el-radio :label="2">图片</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 如果companyDisplayWay ==  1 上传视频 否则上传图片 -->
          <el-form-item label="宣传视频：" prop="companyVideo" v-if="form.companyDisplayWay == 1">
            <upload-video v-model="form.companyVideo" :max-size="100" @success="handleSuccess"
              @error="handleError" />
            <div v-if="form.companyVideo">
              <!-- <p>当前视频：{{ form.companyVideo }}</p> -->
            </div>
          </el-form-item>

          <el-form-item label="宣传图片：" prop="companyImg" v-if="form.companyDisplayWay == 2">
            <upload-img class="logo" :type="uploadRules" v-model="form.companyImg" :info="logoText">
            </upload-img>
          </el-form-item>

          <el-form-item label="详情：" prop="companyDetail">
            <wang-editor v-model="form.companyDetail" style="width: 80%;float: left;"></wang-editor>
          </el-form-item>

          <div class="add_header">
            <el-button @click="closeThis">取消 </el-button>
            <el-button type="primary" @click="submit">保存</el-button>
          </div>
        </el-card>
      </div>
    </el-form>
  </div>
</template>

<script>
import uploadImg from "@/components/upload-img";
import uploadVideo from "@/components/upload-video";
import wangEditor from "@/components/wangEditor";
import {
  getUser,
  updateUser,
  addUser
} from '@/api/system/user';
import {
  listClassifys,
} from '@/api/classify';
export default {
  components: {
    uploadImg,
    uploadVideo,
    wangEditor,
  },
  name: "CompanyEdit",
  data() {
    return {
      uploadRules: ["image/jpeg", "image/jpg", "image/png"],
      logoText: "请上传列表图",
      logoTextVideo: "请上传视频",
      // 表单数据
      form: {
        flag: 0,
        companyDisplayWay: 1,
      },
      // 表单验证规则
      rules: {
        classifyId: [{ required: true, message: "请选择分类", trigger: "blur" }],
        companyName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
        companyNameEn: [{ required: true, message: "请输入企业名称（英文）", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }, { pattern: /^1[3456789]\d{9}$/, message: "手机号格式错误", trigger: "blur" }],
        passwordText: [{ required: true, message: "请输入密码", trigger: "blur" }],
        companyShl: [{ required: true, message: "请输入企业简介", trigger: "blur" }],
        avatar: [{ required: true, message: "请上传企业logo", trigger: "blur" }],
        content: [{ required: true, message: "请输入企业详情", trigger: "blur" }],
        companyDisplayWay: [{ required: true, message: "请选择宣传方式", trigger: "blur" }],
        companyVideo: [{ required: true, message: "请上传视频", trigger: "blur" }],
        companyImg: [{ required: true, message: "请上传图片", trigger: "blur" }],

      },
      // 分类列表
      classifyList: [],
      isUpdate: false,
      loading: false,
    };
  },
  created() {
    if (this.$route.query.userId) {
      this.getFormData(this.$route.query.userId);
      this.isUpdate = true;
    }
    // 获取分类 
    listClassifys().then((res) => {
      console.log(res);
      this.classifyList = res;
    });
  },
  methods: {

    // 表单回显
    getFormData(id) {
      // getArticle
      getUser(id).then((res) => {
        this.form = res;
      });
    },

    changeFlag(val) {

    },
    handleSuccess(response, file) {
      console.log('上传成功:', response)
      // 如果接口返回完整数据，可以直接使用v-model绑定的videoData
    },
    handleError(err, file) {
      console.error('上传失败:', err)
    },

    /* 提交 */
    submit() {
      this.$refs["demoForm"].validate(async valid => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        const data = {
          ...this.form,
          username: this.form.phone,
          nickname: this.form.companyName,
          types: 2,
          // 企业用户权限
          roles: [
            { roleId: 13 }
          ]
        };
        const saveOrUpdate = this.isUpdate ? updateUser : addUser;
        saveOrUpdate(data)
          .then((msg) => {
            // this.loading = false;
            this.$message.success(msg);
            // 跳转到列表页面 /article/index
            this.$router.push({
              path: "./index",
            });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },
    /* 关闭当前页面 */
    closeThis() {
      this.$router.push({
        path: "./index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// add_header 内容居中
.add_header {
  text-align: center;
  margin-top: 20px;
}
</style>
